<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 检测点管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="searchObj.district" placeholder="请选择区域" class="handle-select mr10">
          <el-option v-for="item in districtNameList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      text-align="center"></el-option>
        </el-select>
        <el-input v-model="searchObj.name" placeholder="请输入要查询的检测点" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getHospInfoList()">搜索</el-button>
        <el-button @click="reset">重置</el-button>
<!--        <el-button type="primary"  icon="el-icon-plus" style="margin-left: 700px" @click="editVisible2 = true; hospInfo = {};amTime1='';amTime2='';pmTime1='';pmTime2='';" >添加检测点</el-button>-->
        <el-button type="primary"  icon="el-icon-plus" style="margin-left: 700px" @click="editVisible2 = true; hospInfo = {};amTime1='';amTime2='';pmTime1='';pmTime2='';" >添加检测点</el-button>
        <el-button type="danger" icon="el-icon-delete" style="margin-left: 10px" @click="batchDelete">批量删除</el-button>
      </div>
      <el-table :data="hospInfoList"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" prop="id"></el-table-column>
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column label="图标" width="80">
          <template #default="scope">
            <img :src="scope.row.logo" width="60" align="center">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <el-table-column label="工作时间" align="center">
          <template #default="scope">
            上午:{{scope.row.amTime}} 下午:{{scope.row.pmTime}}
          </template>
        </el-table-column>
        <el-table-column prop="district" label="所在区域" :formatter="getDistrictName" align="center"></el-table-column>
        <el-table-column prop="detailAddr" label="详细地址" align="center"></el-table-column>
        <el-table-column prop="phone" label="咨询电话" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag :type="
                                scope.row.status === 1
                                    ? 'success'
                                    : scope.row.status === 0
                                    ? 'danger'
                                    : ''
                            ">{{ scope.row.status === 1? "已上线":"已下线" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
              <el-button type="text" icon="el-icon-edit" @click="getHospInfoById(scope.row.id)">编辑</el-button>
              <el-button type="text" icon="el-icon-delete" class="red" @click="deleteOne(scope.row.id)">删除</el-button>
              <el-button type="text" icon="el-icon-top" v-if="scope.row.status === 0" @click="changeStatus(scope.row.id,1)">上线</el-button>
              <el-button type="text" icon="el-icon-bottom" v-else style="color: orange" @click="changeStatus(scope.row.id,0)">下线</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="page"
                       :page-size="limit" :total="total" @current-change="getHospInfoList"></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" v-model="editVisible1" width="35%">
      <el-form label-width="80px">
        <div>
          <el-form-item label="图标:">
            <img :src="hospInfo.logo" width="60" align="center">
          </el-form-item>
        </div>
        <el-form-item label="名称:">
          <el-input type="text" v-model="hospInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="区域:">
          <el-select v-model="hospInfo.district" placeholder="请选择区域" class="handle-select mr10">
            <el-option v-for="item in districtNameList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"
                       text-align="center"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input type="text" v-model="hospInfo.detailAddr"></el-input>
        </el-form-item>
        <el-form-item label="工作时间:">
            <div>
              上午
              <el-time-select
                  v-model="amTime1"
                  :max-time="amTime2"
                  class="mr-4"
                  placeholder="Start time"
                  start="00:00"
                  step="00:30"
                  end="24:00"></el-time-select>---
              <el-time-select
                  v-model="amTime2"
                  :min-time="amTime1"
                  placeholder="End time"
                  start="00:00"
                  step="00:30"
                  end="24:00"
              />
            </div>
            <div>
              下午
              <el-time-select
                  v-model="pmTime1"
                  :max-time="pmTime2"
                  class="mr-4"
                  placeholder="Start time"
                  start="12:00"
                  step="00:30"
                  end="24:00"></el-time-select>---
              <el-time-select
                  v-model="pmTime2"
                  :min-time="pmTime1"
                  placeholder="End time"
                  start="12:00"
                  step="00:30"
                  end="24:00"
              />
            </div>
        </el-form-item>
        <el-form-item label="咨询电话:">
          <el-input type="text" v-model="hospInfo.phone"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible1 = false; hospInfo = {}">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
      </template>
    </el-dialog>

<!--    添加框-->
    <el-dialog title="添加" v-model="editVisible2" width="35%">
      <el-form label-width="80px">
        <div>
          <el-form-item label="图标:">
            <el-upload
                class="upload-demo"
                ref="upload"
                action="http://localhost:9001/admin/hospinfo/imgUpload"
                :on-success="uploadSuccess"
                auto-upload="false">
              <template #trigger class="upload-demo">
                <el-button type="info">选择图片</el-button>
              </template>
              <el-button class="ml-3" type="primary" @click="submitUpload"
              >上传</el-button
              >
              <template #tip>
                <div class="el-upload__tip">
                  请上传jpg、png图片,选择之后请点击上传
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </div>
        <el-form-item label="名称:">
          <el-input type="text" v-model="hospInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="区域:">
          <el-select v-model="hospInfo.district" placeholder="请选择区域" class="handle-select mr10">
            <el-option v-for="item in districtNameList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"
                       text-align="center"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input type="text" v-model="hospInfo.detailAddr"></el-input>
        </el-form-item>
        <el-form-item label="工作时间:">
          <div>
            上午
            <el-time-select
                v-model="amTime1"
                :max-time="amTime2"
                class="mr-4"
                placeholder="Start time"
                start="00:00"
                step="00:30"
                end="24:00"></el-time-select>---
            <el-time-select
                v-model="amTime2"
                :min-time="amTime1"
                placeholder="End time"
                start="00:00"
                step="00:30"
                end="24:00"
            />
          </div>
          <div>
            下午
            <el-time-select
                v-model="pmTime1"
                :max-time="pmTime2"
                class="mr-4"
                placeholder="Start time"
                start="12:00"
                step="00:30"
                end="24:00"></el-time-select>---
            <el-time-select
                v-model="pmTime2"
                :min-time="pmTime1"
                placeholder="End time"
                start="12:00"
                step="00:30"
                end="24:00"
            />
          </div>
        </el-form-item>
        <el-form-item label="咨询电话:">
          <el-input type="text" v-model="hospInfo.phone"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible2 = false;hospInfo = {}">取 消</el-button>
                    <el-button type="primary" @click="addHospInfo">添加</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import addrdict from "../api/addrdict";
import hospInfo from "../api/hospInfo";
import {ElMessage, ElMessageBox} from "element-plus";
export default {
  name: "detection",

  data(){
    return{
      searchObj:{},
      districtNameList:[],
      hospInfoList:[],
      page:1,
      limit:8,
      totalPage:null,
      total:null,
      districtName:null,
      ids:[],
      hospInfo:{},
      editVisible1:false,
      editVisible2:false,
      amTime1:'',
      amTime2:'',
      pmTime1:'',
      pmTime2:'',
      imgUrl:''
    }
  },
  methods:{
    //获取区域列表
    getDistrictNameList() {
      addrdict.getDistrictNameList(0).then(response =>{
        this.districtNameList = response.data
      })
    },

    //获取检测点信息列表
    getHospInfoList(page=1) {
        this.page = page
        hospInfo.getHospInfoList(this.page,this.limit,this.searchObj).then(response =>{
          this.hospInfoList = response.data.records
          this.totalPage = response.data.pages
          this.total = response.data.total
          console.log(this.hospInfoList)
        })
    },

    //将所在区域的id转换为名称
    getDistrictName(row,column){
        switch (row.district){
          case 2:
              return '中原区'
              break;
          case 3:
            return '二七区'
            break;
          case 4:
            return '管城回族区'
            break;
          case 5:
            return '金水区'
            break;
          case 6:
            return '上街区'
            break;
          case 7:
            return '惠济区'
            break;
          case 8:
            return '中牟县'
            break;
          case 9:
            return '经开区'
            break;
          case 10:
            return '高新区'
            break;
          case 11:
            return '航空港区'
            break;
          case 12:
            return '巩义市'
            break;
          case 13:
            return '荥阳市'
            break;
          case 14:
            return '新密市'
            break;
          case 15:
            return '新郑市'
            break;
          case 16:
            return '登封市'
            break;
          case 222:
            return '郑东新区'
            break;
        }
    },

    //重置搜索条件
    reset(){
      console.log("重置")
      this.searchObj.district = null
      this.searchObj.name = null
    },

    //修改上下线功能
    changeStatus(id,status){
      ElMessageBox.confirm("确定要更改检测点状态吗?","提示",{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
      }).then(()=>{
        hospInfo.changeStatus(id,status).then(response =>{
          this.getHospInfoList(this.page)
          ElMessage({
            message:"更改成功",
            type:"success"
          })
        })
      }).catch(()=>{
        ElMessage({
          type: 'info',
          message: '取消更改'
        })
      })
    },

    //根据id删除检测点
    deleteOne(id) {
      ElMessageBox.confirm("确定要删除这条数据吗?","警告",{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
      }).then(()=>{
        hospInfo.deleteOne(id).then(response =>{
          ElMessage({
            message:"删除成功",
            type:"success"
          })
          this.getHospInfoList(this.page)
        }).catch(()=>{
          ElMessage({
            message:"删除失败",
            type:"danger"
          })
        })
      }).catch(()=>{
        ElMessage({
          message:"取消删除",
          type:"info"
        })
      })
    },

    //获取选中的id值
    handleSelectionChange(ids){
      this.ids = []
      for(var i = 0; i < ids.length; i++){
        this.ids.push(ids[i].id)
      }
    },

    //批量删除
    batchDelete(){
      ElMessageBox.confirm("确定要批量删除选中数据吗?","警告",{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
      }).then(()=>{
        hospInfo.batchDelete(this.ids).then(response=>{
          ElMessage({
            message:"删除成功",
            type:"success"
          })
          this.ids = []
          this.getHospInfoList(this.page)
        }).catch(()=>{
          ElMessage({
            message:"删除失败",
            type:"info"
          })
          this.ids = []
        })
      }).catch(()=>{
        ElMessage({
          message:"取消删除",
          type:"info"
        })
        this.ids = []
      })
    },

    //根据id查询检测点信息
    getHospInfoById(id) {
      hospInfo.getHospInfoById(id).then(response1 =>{
        this.hospInfo = response1.data
        console.log(response1.data.amTime)
        console.log(response1.data.pmTime)
        hospInfo.parseTimeStr(response1.data.amTime).then(response2=>{
          this.amTime1 = response2.data[0]
          this.amTime2 = response2.data[1]
        })
        hospInfo.parseTimeStr(response1.data.pmTime).then(response2=>{
          this.pmTime1 = response2.data[0]
          this.pmTime2 = response2.data[1]
        })
        this.editVisible1 = true
      })
    },

    //保存修改
    saveEdit(){
      this.hospInfo.amTime = this.amTime1+"-"+this.amTime2
      this.hospInfo.pmTime = this.pmTime1+"-"+this.pmTime2
      hospInfo.saveEdit(this.hospInfo).then(response=>{
        this.editVisible1 = false
        this.hospInfo = null
        this.getHospInfoList(this.page)
      })
    },

    //上传图片
    submitUpload(){
      this.$refs.upload.submit()
    },

    //上传成功之后
    uploadSuccess(response){
      console.log(response.data)
      this.imgUrl = response.data
    },

    addHospInfo(){
      if(this.imgUrl != ''){
        this.hospInfo.logo = this.imgUrl
      }
      this.hospInfo.amTime = this.amTime1+"-"+this.amTime2
      this.hospInfo.pmTime = this.pmTime1+"-"+this.pmTime2
      hospInfo.addHospInfo(this.hospInfo).then(response=>{
        this.imgUrl = ''
        this.hospInfo = null
        this.editVisible2 = false
        this.getHospInfoList(this.totalPage)
      })
    }

  },
  created() {
    this.getDistrictNameList()
    this.getHospInfoList()
  }

};
</script>

<style>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.upload-demo {
  display: inline;
}
.el-upload {
  display: inline;
  text-align: center;
  cursor: pointer;
  outline: 0;
}


</style>
